<template>
  <div class="hot border-top">
     <div class="hot-top">
         <p class="hot-title"><span class="iconfont">&#xe606;</span>  本周热门榜单</p>
         <p class="hot-more">查看更多<span class="iconfont">&#xe60e;</span></p>
     </div>
     <ul class="hot-list">
         <li class="hot-item" v-for="item in hotList" :key="item.id">
             <img :src="item.hotUrl" alt="">
             <p  >{{item.hotName}}</p>
             <p ><span class="hot-price">￥{{item.hotPrice}}</span>起</p>
         </li>
     </ul>
  </div>
</template>
<script>
	export default {
        props:['hotList'],
        data(){
            return{
               
            }
        }
    }
</script>

<style scoped lang="stylus" >
@import '~css/common.styl'
    .hot{
        margin-top .2rem
        background-color #fff
        font-size .28rem
    }
    .hot .hot-top{   
        position relative
        padding: .2rem;
    }
    .hot .hot-top .hot-title{
        font-size .32rem
    }
    .hot .hot-top .hot-title span{
        color red
    }
    .hot .hot-top  .hot-more{
        position absolute 
        right .2rem
        top .2rem
        color #616161
    }
    .hot .hot-top  .hot-more span{
        font-weight bold
    }

    .hot-list{
        // /*强制一行拖动*/
        overflow-x scroll
        white-space nowrap
        line-height 1.8rem
    }
    .hot-item{
        display inline-block
        width 2rem
        height 2rem
        padding .2rem
        font-size .28rem
        color #212121
        text-align center
    }
    .hot-item img{
        display block
        width 100%
        height 100%
        margin-bottom .1rem

    }
    .hot-item p{
        line-height .4rem
        textOverflow()
    }
    .hot-price{
        color #ff8300
        font-size .32rem
    }
                



         
</style>
